<template>
  <div id="app">
    <div class="header">
      <el-button @click="goBack" style="text-align: left; font-weight: bold;font-size: 35px;margin-bottom:10px;margin-left:50px;float: left" circle >←</el-button>
      <span style="font-weight: bold;font-size: 35px;">社区维修服务分类说明</span>
    </div>

    <div class="container">
      <div class="btn-group">
        <button class="category-btn" @click="scrollTo('public')">
          <i class="fas fa-tools" style="color: #ffc4a5;"></i>
          <h3>公共设施维修</h3>
        </button>
        <button class="category-btn" @click="scrollTo('water')">
          <i class="fas fa-faucet" style="color: #4cd964;"></i>
          <h3>水电维修</h3>
        </button>
        <button class="category-btn" @click="scrollTo('security')">
          <i class="fas fa-shield-alt" style="color: #ff9500;"></i>
          <h3>安全系统维修</h3>
        </button>

        <button class="category-btn" @click="scrollTo('road')">
          <i class="fas fa-road" style="color: #ff2d55;"></i>
          <h3>道路与停车场</h3>
        </button>
        <button class="category-btn" @click="scrollTo('structure')">
          <i class="fas fa-home" style="color: #af52de;"></i>
          <h3>房屋结构维修</h3>
        </button>
      </div>

      <!-- 公共设施维修 -->
      <div id="public" class="repair-section" :class="{highlight: highlighted === 'public'}">
        <div class="section-header">
          <i class="fas fa-tools" style="background: linear-gradient(90deg, #ffd2ae, #ffd2ae);"></i>
          <h2 class="section-title">一、公共设施维修</h2>
        </div>
        <p><strong>具体问题：</strong></p>
        <ul class="problem-list">
          <li>电梯故障（如电梯停运、门无法正常开关）</li>
          <li>照明系统损坏（如路灯不亮、楼道灯泡烧毁）</li>
          <li>健身器材损坏（如跑步机停止工作、健身器材螺丝松动）</li>
          <li>公共座椅损坏（如公园长椅破损、固定不稳）</li>
          <li>儿童游乐设施故障（如滑梯损坏、秋千链条断裂）</li>
        </ul>
      </div>

      <!-- 水电维修 -->
      <div id="water" class="repair-section" :class="{highlight: highlighted === 'water'}">
        <div class="section-header">
          <i class="fas fa-faucet" style="background: linear-gradient(90deg, #4cd964, #5de876);"></i>
          <h2 class="section-title">二、水电维修</h2>
        </div>
        <p><strong>常见问题：</strong></p>
        <ul class="problem-list">
          <li>水管漏水（如厨房水槽下水管渗水、卫生间马桶漏水）</li>
          <li>电路短路（如插座无电、开关跳闸）</li>
          <li>热水器故障（如热水供应中断、热水器无法点火）</li>
          <li>水压不足（如高层住户水压不稳）</li>
          <li>排水系统堵塞（如地漏反水、下水道堵塞）</li>
        </ul>
      </div>

      <!-- 安全系统维修 -->
      <div id="security" class="repair-section" :class="{highlight: highlighted === 'security'}">
        <div class="section-header">
          <i class="fas fa-shield-alt" style="background: linear-gradient(90deg, #ff9500, #ffaa33);"></i>
          <h2 class="section-title">三、安全系统维修</h2>
        </div>
        <p><strong>安全问题：</strong></p>
        <ul class="problem-list">
          <li>消防设施故障（如灭火器压力不足、烟雾探测器失灵）</li>
          <li>监控摄像头损坏（如摄像头画面模糊、无法转动）</li>
          <li>门禁系统故障（如门禁卡无法识别、电子锁无法开启）</li>
          <li>报警系统误报（如误报警、系统失灵）</li>
          <li>紧急呼叫装置故障（如无法接通、声音不清晰）</li>
        </ul>
      </div>


      <!-- 道路与停车场维修 -->
      <div id="road" class="repair-section" :class="{highlight: highlighted === 'road'}">
        <div class="section-header">
          <i class="fas fa-road" style="background: linear-gradient(90deg, #ff2d55, #ff5a7f);"></i>
          <h2 class="section-title">四、道路与停车场维修</h2>
        </div>
        <p><strong>道路问题：</strong></p>
        <ul class="problem-list">
          <li>路面破损（如沥青路面出现坑洼、人行道砖块松动）</li>
          <li>停车场设施损坏（如停车线模糊、停车计时器故障）</li>
          <li>指示标志损坏（如交通指示牌缺失或损坏）</li>
          <li>减速带损坏（如减速带脱落、破损）</li>
          <li>排水系统堵塞（如雨天积水、排水不畅）</li>
        </ul>
      </div>

      <!-- 房屋结构与装修维修 -->
      <div id="structure" class="repair-section" :class="{highlight: highlighted === 'structure'}">
        <div class="section-header">
          <i class="fas fa-home" style="background: linear-gradient(90deg, #af52de, #c585f3);"></i>
          <h2 class="section-title">五、房屋结构与装修维修</h2>
        </div>
        <p><strong>结构问题：</strong></p>
        <ul class="problem-list">
          <li>墙体裂缝（如外墙出现裂缝、内墙涂料脱落）</li>
          <li>地板翘曲（如木质地板受潮膨胀）</li>
          <li>窗户密封不良（如窗户漏风、玻璃破损）</li>
          <li>屋顶漏水（如雨天渗水、防水层损坏）</li>
          <li>隔音问题（如隔音效果差、噪音传导）</li>
        </ul>
      </div>

      <div class="recommendations">
        <h2>维修服务延伸建议</h2>
        <div class="rec-cards">
          <div class="rec-card">
            <h3><i class="fas fa-mobile-alt"></i> 维修流程优化</h3>
            <p>建立在线报修平台，用户可通过社区APP提交维修请求，实时跟踪维修进度。维修人员通过移动端接收工单，提高响应速度。</p>
          </div>
          <div class="rec-card">
            <h3><i class="fas fa-star"></i> 维修质量监控</h3>
            <p>引入用户评价系统，维修完成后用户可对服务进行评分和反馈。每月评选"维修之星"，根据用户反馈持续提升服务质量。</p>
          </div>
          <div class="rec-card">
            <h3><i class="fas fa-calendar-check"></i> 预防性维护计划</h3>
            <p>根据历史维修数据，制定季度预防性维护计划。建立设备生命周期档案，提前更换老化设备，减少紧急维修事件。</p>
          </div>
        </div>
      </div>

      <div class="footer">
        <h3>社区物业服务中心</h3>
        <p>服务时间：24小时全天候服务 | 服务热线: 400-123-4567</p>
        <p>地址：社区综合服务中心一楼 | 电子邮箱：service@community.com</p>
        <p>© 2025 智慧社区管理系统 - 让居住更美好</p>
      </div>
    </div>
    <el-backtop :bottom="100" :right="100">
      <div
          style="
            height: 100%;
            width: 100%;
            background-color: var(--el-bg-color-overlay);
            box-shadow: var(--el-box-shadow-lighter);
            text-align: center;
            line-height: 40px;
            color: #1989fa;
          "
      >
        UP
      </div>
    </el-backtop>
  </div>
</template>

<script>
import { createApp, ref } from 'vue';
import ElementPlus from 'element-plus';
import { useRouter, useRoute } from 'vue-router';
import 'element-plus/dist/index.css';
import { CloseBold } from '@element-plus/icons-vue';

export default {
  name: 'CommunityRepairGuide',
  setup() {
    const highlighted = ref('');
    const router = useRouter();
    const route = useRoute();

    const explain = () => {
      scrollTo('public');
    };

    const goBack = () => {
      router.go(-1);
    };

    const scrollTo = (id) => {
      highlighted.value = id;
      const element = document.getElementById(id);
      if (element) {
        element.scrollIntoView({ behavior: 'smooth', block: 'start' });
      }

      // 3秒后移除高亮效果
      setTimeout(() => {
        highlighted.value = '';
      }, 3000);
    };

    const scrollToTop = () => {
      window.scrollTo({
        top: 0,
        behavior: 'smooth'
      });
    };

    return {
      explain,
      scrollTo,
      scrollToTop,
      highlighted,
      goBack,
      CloseBold
    };
  }
};
</script>

<style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
}
body {
  background: linear-gradient(135deg, #f5f9fc 0%, #e6f0f5 100%);
  color: #333;
  line-height: 1.6;
  padding: 0;
  min-height: 100vh;
  position: relative;
}
.header {
  background: linear-gradient(90deg, #fff5e9, #fff5e9);
  color: #fca957;
  padding: 20px 0;
  text-align: center;
  box-shadow: 0 4px 12px rgba(28, 138, 248, 0.3);
  position: sticky;
  top: 0;
  z-index: 100;
}
.header h1 {
  font-size: 2.5rem;
  margin-bottom: 10px;
  letter-spacing: 1px;
}
.header p {
  font-size: 1.1rem;
  max-width: 800px;
  margin: 0 auto;
  opacity: 0.9;
}
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 30px 20px;
}

.btn-group {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;

}
.category-btn {
  flex: 1;
  min-width: 150px;
  height: 70px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: end;
  background: #ffdcc7;
  border-radius: 12px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
  cursor: pointer;
  border: none;
  padding: 20px;
  text-align: center;
}
.category-btn:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}
.category-btn i {
  font-size: 2.5rem;
  margin-bottom: 15px;
}
.category-btn h3 {
  font-size: 1.1rem;
  font-weight: 600;
}
.repair-section {
  background: white;
  border-radius: 12px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
  padding: 30px;
  margin-bottom: 30px;
  scroll-margin-top: 120px;
}
.section-header {
  display: flex;
  align-items: center;
  margin-bottom: 25px;
  padding-bottom: 15px;
  border-bottom: 2px solid #f0f5ff;
}
.section-header i {
  font-size: 2rem;
  margin-right: 15px;
  height: 60px;
  width: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: white;
}
.section-title {
  font-size: 1.8rem;
  color: #ffa471;
}
.problem-list {
  margin: 15px 0;
  padding-left: 20px;
}
.problem-list li {
  margin-bottom: 12px;
  position: relative;
  padding-left: 25px;
  font-size: 1.1rem;
}
.problem-list li:before {
  content: "•";
  color: #2c8af8;
  font-weight: bold;
  position: absolute;
  left: 0;
  font-size: 1.5rem;
  top: -3px;
}

.solution-box strong {
  color: #1a6dcc;
  display: block;
  margin-bottom: 8px;
  font-size: 1.2rem;
}
.recommendations {
  background: #ffeee0;
  border-radius: 12px;
  padding: 30px;
  margin-top: 40px;
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.08);
}
.recommendations h2 {
  text-align: center;
  color: #fca957;
  margin-bottom: 25px;
  font-size: 1.8rem;
}
.rec-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 25px;
  justify-content: center;
}
.rec-card {
  background: linear-gradient(135deg, #f0f8ff 0%, #ffefe1 100%);
  border-radius: 12px;
  padding: 25px;
  flex: 1;
  min-width: 300px;
  border-top: 4px solid #f8a62c;
  transition: all 0.3s ease;
}
.rec-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}
.rec-card h3 {
  color: #ffc29c;
  margin-bottom: 15px;
  display: flex;
  align-items: center;
  font-size: 1.3rem;
}
.rec-card h3 i {
  margin-right: 12px;
  font-size: 1.8rem;
  background: #ffefe1;
  color: #000000;
  width: 45px;
  height: 45px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}
.footer {
  text-align: center;
  margin-top: 40px;
  padding: 20px;
  color: #666;
  font-size: 0.9rem;
  background: #fff5f0;
  border-radius: 12px;
}
.highlight {
  animation: highlight 2s ease;
  box-shadow: 0 0 0 4px rgba(248, 146, 44, 0.3);
}
@keyframes highlight {
  0% { box-shadow: 0 0 0 0 rgba(255, 92, 0, 0.6); }
  70% { box-shadow: 0 0 0 20px rgba(44, 138, 248, 0); }
  100% { box-shadow: 0 0 0 0 rgba(44, 138, 248, 0); }
}


@media (max-width: 768px) {
  .header h1 {
    font-size: 2rem;
  }
  .action-bar {
    flex-direction: column;
    gap: 20px;
  }
  .btn-group {
    flex-direction: column;
  }
  .category-btn {
    min-width: 100%;
  }
  .rec-cards {
    flex-direction: column;
  }
  .section-header {
    flex-direction: column;
    text-align: center;
  }
  .section-header i {
    margin-right: 0;
    margin-bottom: 15px;
  }
}
</style>
